<style>
.error {
    /*0审核失败*/
    color: #ed3f14;
}

.NotFillIn {
    /*1未填报*/
    color: #ff9900;
}

.FillIn {
    /*2已填报*/
    color: #993300;
}

.AlreadyReport {
    /*3已上报*/
    color: #2d8cf0;
}

.success {
    /*4审核通过*/
    color: #19be6b;
}

.lock {
    /*5锁定*/
    color: #80848f;
}
li{
        /*border-bottom: 1px solid #E3E8EE;*/
        line-height: 40px;
}
.home{
    padding: 8px;
    background: url("../assets/homebackimag.jpg");
}
</style>

<template>
    <div class="home" v-bind:style="{ height: clientHeight + 'px' }" >
        <Row class="row">
            <!-- <Col :lg="{span:7}" :md="{span:12}" :sm="{span:24}" :xs="{span:24}">
            <Card>
                <p slot="title" style="height:30px">
                    <Icon type="android-contact" size="28" color="#377ec4"></Icon>
                    <span style="font-size:24px;">欢迎您:{{UserModel.UserName}}</span>
                </p>
                <div style="height:450px;">
                    <ul>
                        <li>
                            <span>上次登录:</span>
                            <span>{{UserModel.LastLoginTime|moment}}</span>
                        </li>
                        <li>
                            <span>所在地区:</span>
                            <span>{{UserModel.AreaCode|omgAreaName}}</span>
                        </li>
                        <li>
                            <span>个人电话:</span>
                            <span>{{UserModel.Phone}}</span>
                        </li>
                        <li>
                            <span>工作电话:</span>
                            <span>{{UserModel.TelPhone}}</span>
                        </li>
                        <li>
                            <span>电子邮件:</span>
                            <span>{{UserModel.Email}}</span>
                        </li>
                        <li>
                            <span>现任职务:</span>
                            <span>{{UserModel.PostName}}</span>
                        </li>
                        <li>
                            <span>工作单位:</span>
                            <span>{{UserModel.UnitName}}</span>
                        </li>
                        <li>
                            <span>单位地址:</span>
                            <span>{{UserModel.UnitAddress}}</span>
                        </li>
                        <li>
                            <span>特别提醒:</span>
                            <span>
                                <span style="color:red;">***请核对个人信息，如需修改，请点击右上角进行修改***</span>
                            </span>
                        </li>
                    </ul>
                </div>
            </Card>
            </Col> -->
            <Col span="24" class="Col">
            <Card>
                <p slot="title" style="height:30px">
                    <Icon type="clipboard" size=28 color="#377ec4"></Icon>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label style="font-size:24px">进度概览</label>
                </p>
                <div style="margin-bottom:10px;">
                    填报年份：
                    <Select v-model="FillInYear" placeholder="全部" :label-in-value="true" @on-change="initReportReview()" style="width:120px">
                        <Option v-for="item in yearList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
                    </Select>
                </div>
                <Table ref="table" :stripe=true :border=true :columns="TableHeader" :data="datas" size="large" height="450">
                </Table>
            </Card>
            </Col>
        </Row>
        <Modal v-model="showType" :mask-closable="false" width="800" :sytles="{top:'10px'}" >
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">{{ReportName}}-填报情况</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>   
            <div style="margin-bottom:10px">        
                报表状态：
                <Select v-model="Status" placeholder="全部" style="width: 200px" @on-change="showDetail()">
                    <Option value="">全部</Option>
                    <Option :value="item.DictValue" v-for="item in statusList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select>
            </div>
            <Table :stripe=true :border=true :columns="AreaHeader" :data="Areadatas" size="large" height="600"></Table>
            <p slot="footer"></p>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInfo: this.GetlocaStorage("potUserinfo"),
            UserModel: {},
            datas: [],
            FillInYear:new Date().getFullYear().toString(),
            yearList: this.GetGroupDict("ReportYear"),
            statusList: this.GetGroupDict("ReportStatus"), 
            clientHeight: window.innerHeight - 137,//表格默认高度
            TableHeader: [
                { title: '报表名称', key: 'ReportName', ellipsis: true },
                { title: '退回重报', key: 'ReviewFalse', width: 120, className: 'error' },
                { title: '未填写', key: 'NotFillIn', width: 120, className: 'NotFillIn' },
                { title: '已填写', key: 'FillIn', width: 120, className: 'FillIn' },
                { title: '已上报', key: 'AlredayReport', width: 120, className: 'AlreadyReport' },
                { title: '审核通过', key: 'ReviewSuccess', width: 120, className: 'success' },
                {
                    title: '操作',
                    key: 'action',
                    width: 120,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                class: { ieditColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'ios-compose'
                                },
                                style: { marginRight: '5px', marginTop: '10px' },
                                on: {
                                    click: () => { 
                                        this.ReportName = params.row.ReportName;
                                        //this.ReportModel.FillInYear = params.row.FillInYear;
                                        //this.ReportModel.ReportCode = params.row.ReportCode;
                                        //this.ReportModel.TimesCycle = params.row.TimesCycle;
                                        this.showDetail();
                                    }
                                }
                            }, '查看'),                           
                            

                        ]);
                    }
                }
            ],
            showType:false,//是否显示报表填报情况
            ReportName:'',//所点击报表名称
            Areadatas:[],
            AreaHeader: [
                { title: '所属地区', key: 'CityName', ellipsis: true },
                { title: '地区名称', key: 'CountyName'  },
                { title: '报表状态', key: 'Status', width: 180 ,
                    render: (h, params) => {
                        switch (params.row.Status * 1) {
                            case 0: //退回重报
                                return h('span', { class: 'error' }, '退回重报');
                            case 1: //未填写
                                return h('span', { class: 'NotFillIn' }, '未填写');
                            case 2: //已填写
                                return h('span', { class: 'FillIn' }, '已填写');
                            case 3: //已上报
                                return h('span', { class: 'AlreadyReport' }, '已上报');
                            case 4: //审核通过
                                return h('span', { class: 'success' }, '审核通过');
                            case 5: //锁定
                                return h('span', { class: { error: true } }, '锁定');
                            default:
                                return h('span', { class: { Default: true } }, '');
                        }
                    }
                },
            ],
            Status:'',//报表状态
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 137;
            })()
        };
    },
    methods: {
        initUser() {
            var self = this;
            this.$http.get("User", { params: { id: this.userInfo.UserId } }).then(
                function (res) {
                    if (res.data.status == 1) {
                        self.UserModel = res.data.model;
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "系统异常，请与管理员联系!!!" });
                    }
                });
        },
        initReportReview() {
            var self = this;
            //let Year = new Date().getFullYear().toString();
            self.$http.get('Report/GetReportReview?AreaCode=' + this.userInfo.AreaCode+"&&FillInYear="+this.FillInYear).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data.model;
                }
                else {
                    self.$Modal.error({
                        title: '提示信息',
                        content: res.data.message
                    });
                }
            });
        },
        showDetail(){
            var self = this;
            var ReportModel={
                ReportName:this.ReportName,
                Status:this.Status,
                AreaCode:this.userInfo.AreaCode
            }
            this.$http.post('Report/GetDetailReportReview',ReportModel).then(function (res) {
                if (res.data.status === 1) {
                    self.Areadatas = res.data.model;
                    self.showType = true;
                }
                else {
                    self.$Modal.error({
                        title: '提示信息',
                        content: res.data.message
                    });
                }
            });
        }
    },
    //创建Vue页面方法
    created: function () {
        this.initUser();
        this.initReportReview();
    },
}
</script>